<template>
  <router-layout>
    <van-tabs v-model="active" color="#1989fa">
      <van-tab title="活动">
        <div class="lackyDraw">
          <div class="list">
            <!-- 暂无数据组件 -->
            <Nodata v-if="!dataList.length"></Nodata>
            <van-list v-else v-model="loading" :finished="finished" @load="onLoad" :offset="0">
              <van-cell v-for="item in activeDataList" :key="item.id">
                <div class="content-box" @click="openLink(item)">
                  <van-row
                    class="container-header"
                    type="flex"
                    justify="space-between"
                    align="bottom"
                  >
                    <van-col class="van-ellipsis">
                      <div class="content-title one-txt-cut">{{ item.active_title }}</div>
                      <div class="base" v-if="item.active_status<3">
                        <p
                          class="base-text"
                        >报名时间：{{item.signup_start_time | formate_date}}-{{item.signup_end_time | formate_date}}</p>
                      </div>
                      <div class="base">
                        <p
                          class="base-text"
                        >活动时间：{{item.active_start_time | formate_date}}-{{item.active_end_time | formate_date}}</p>
                      </div>
                    </van-col>
                    <van-col>
                      <div class="content-img" v-if="item.file_path">
                        <img :src="item.file_path" width="100%" alt>
                        <div
                          class="btns"
                          v-if="item.active_status==1"
                          style="background-color: #01A0EF"
                        >
                          <p>预热</p>
                        </div>
                        <div
                          class="btns"
                          v-if="item.active_status==2"
                          style="background-color: #E6A23D"
                        >
                          <p>报名中</p>
                        </div>
                        <div
                          class="btns"
                          v-if="item.active_status==3"
                          style="background-color: #E6A23D"
                        >
                          <p>待进行</p>
                        </div>
                        <div
                          class="btns"
                          v-if="item.active_status==4"
                          style="background-color: #67C23A"
                        >
                          <p>进行中</p>
                        </div>
                        <div
                          class="btns"
                          v-if="item.active_status==5"
                          style="background-color: #DADADA"
                        >
                          <p>已结束</p>
                        </div>
                      </div>
                    </van-col>
                  </van-row>
                  <div class="content-middle">
                    <van-row type="flex" justify="space-between">
                      <van-col>
                        <span>{{item.create_username}}</span>
                        <span v-if="!item.top_status==0">
                          <van-tag type="primary">置顶</van-tag>
                        </span>
                      </van-col>
                      <van-col>
                        <i class="title-user">
                          <span class="iconfont icon-dianzan"></span>
                          <span>{{item.like_nums || 0}}</span>
                        </i>
                        <i class="title-user">
                          <span class="iconfont icon-xiaoxi"></span>
                          <span>{{item.comment_nums || 0}}</span>
                        </i>
                      </van-col>
                    </van-row>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </div>
        </div>
      </van-tab>
      <van-tab title="工会">
        <sqbxUnion></sqbxUnion>
      </van-tab>
    </van-tabs>
  </router-layout>
</template>

<script>
import { activity_list } from "@/api/activity";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import sqbxUnion from "./../laborUnion/sqbxUnion"; 
import moment from "moment";

export default {
  components: { Nodata,sqbxUnion },
  computed: {
    activeDataList: function () {
      return this.dataList.filter(function (item) {
        return item.close_status == 1
      })
    }
  },
  data() {
    return {
      dataList: [],
      staus: 1,
      active:0,
      isNoData: false,
      loading: false,
      finished: false,
      t_active: [
        { name: "预热中", type: null },
        { name: "报名中", type: "danger" },
        { name: "待开始", type: "warning" },
        { name: "进行中", type: "success" },
        { name: "已结束", type: "info" }
      ],
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId") || 1
      },
      total: ""
    };
  },
  filters: {
    formate_date(v) {
      return moment(v).format("YYYY/MM/DD");
    }
  },
  methods: {
    back() {},
    openLink(e) {
      this.$router.push({
        path: "/ActivityDetail",
        query: { id: e.id, status: e.active_status, name: "home" }
      });
    },
    link_apply(item) {
      this.$router.push({
        path: "/Apply",
        query: { active_id: item.id }
      });
    },
    async initList() {
      let res = await activity_list(this.listQuery);
      if (res.data.status == 100) {
        this.dataList = res.data.data.rows;
        this.total = res.data.data.results;
        if (!res.data.data.results) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (res.data.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
@import "ActivityHome";
</style>
